<template>
  <div class="tips" v-if="showDealDia">
    <div style="display: flex;align-items: center;padding-left: 10px;">
      <div style="flex: 1;">{{fileName||'PDF文件预览'}}</div>
      <van-button type="default" style="background: #ffffff;border: none" round @click="handleCancel"><van-icon name="cross" /></van-button>
    </div>
    <div class="main-wrapper">
      <iframe id="iframe" :src="url" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
    </div>
  </div>
</template>
<script>
import { Button } from 'vant'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    pdfUrl: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: ''
    },
  },
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      url: ''
    }
  },
  computed: {
    showDealDia: {
      get() {
        return this.value
      },
      set(val) {
        return val
      }
    }
  },
  methods: {
    //生成pdfSrc
    generatePdfSrc() {
      // 这里的url可以是pdf文件的访问路径，也可以是通过window.URL.createObjectURL（）生成的路径
      let pdfUrl = 'http://192.168.11.141:8501/admin-api/infra/file/4/get/202403/d053551fffed41025ac6b1c241f5d2fe7f0302e46e92b4c392f4512e3fa100ef.pdf'
      // ./static/pdf/web/viewer.html 这里的地址是插件在项目中的地址
      this.url = 'pdfjs-dist/web/viewer.html?file=' +  this.pdfUrl
    },
    handleOk() {
      this.$emit('ok')
      this.$emit('change', false)
    },
    handleCancel() {
      this.$emit('change', false)
    }
  },
  mounted() {

  },
  model: {
    prop: 'value',
    event: 'change'
  },
  watch: {
    value(val) {
      if(val) {
        this.generatePdfSrc()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.tips {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,1);
  z-index: 10001;
  .tips_content_wrapper {
    position: absolute;
    display: block;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    .tips_content {
      width: 72vw;
      min-height: 40vw;
      padding: 15px;
      box-sizing: border-box;
      background: url("../assets/img/tipsbg.png");
      background-size: 100% 100%;
    }
    .tipicon {
      width: 83px;
      height: auto;
      position: absolute;
      right: -22px;
    }
  }
  .main-wrapper {
    width: 100%;
    height: 100%;
  }
}
</style>